import React, { useRef } from 'react';
import { Button, Input, Space } from 'antd';
// 连接仓库
import { connect } from 'umi';

function sensorSet(props: any) {
  const inp: any = useRef(null);

  console.log('能否获取 dva', props);
  return (
    <>
      <div>感测器资讯设定</div>
      <p>{props.dvaData.num}</p>
      <Button
        onClick={() => {
          props.onAsyncDecrease();
        }}
      >
        异步减
      </Button>
      <Button type="primary" onClick={props.onDecrease}>
        {' '}
        获取 dva -
      </Button>
      <Button type="primary" onClick={props.onIncrease}>
        +
      </Button>

      <Button
        onClick={() => {
          props.onAsyncIncrease();
        }}
      >
        异步加
      </Button>

      <Space>
        <Input type="number" ref={inp} />
        <Button
          onClick={() => {
            // 触发props 中挂载的函数
            props.onAdd(parseInt(inp.current.state.value));
          }}
        >
          加上
        </Button>
      </Space>
    </>
  );
}

/* 挂载 */
const mapStateToProps = (state: any) => {
  console.log('mapStateToProps', state);
  // 返回需要的数据属性
  return {
    // setting 指命名空间
    dvaData: state.setting,
  };
};
/* 分发 触发 */
const mapDispathToProps = (dispatch: any) => {
  return {
    onDecrease: () => {
      dispatch({
        // 触发方法时需要添加上命名空间
        type: 'setting/decrease',
      });
    },
    onIncrease: () => {
      dispatch({
        type: 'setting/increase',
      });
    },
    onAdd(n: number) {
      // console.log(n, 'n?????????')
      dispatch({
        type: 'setting/add',
        payload: n,
      });
    },
    // 使用 副作用 操作
    onAsyncIncrease() {
      dispatch({ type: 'setting/asyncIncrease' });
    },
    onAsyncDecrease() {
      dispatch({ type: 'setting/asyncDecrease' });
    },
  };
};

export default connect(mapStateToProps, mapDispathToProps)(sensorSet);
